import { queryFeeds } from '@/services/Feeds';
import { queryAllContact } from '@/services/Contact';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import { PageContainer, ProList } from '@ant-design/pro-components';
import { Avatar, Col, Flex, Image, Row, Typography, Alert } from 'antd';
import React from 'react';
import './Style/Feeds.less';
import { useEffect, useState } from 'react';
import dayjs from 'dayjs';

// 定义组件 IconText，用于显示图标和文字
const IconText = ({ icon, text }: { icon: any; text: string }) => (
  <span>
    {React.createElement(icon, { style: { marginInlineEnd: 8 } })} 
    {text}
  </span>
);

// 解构 Typography 组件中的 Text 和 Link
const { Text, Link } = Typography;

// 定义主组件 Feeds
const Feeds: React.FC = () => {
  // 定义状态 allContact，用于存储联系人信息
  const [allContact, setAllContact] = useState<{ [key: string]: { text: string } }>({});

  // 定义一个异步函数 getAllContact，用于获取联系人信息
  const getAllContact = async () => {
    try {
      // 调用 queryAllContact 获取联系人数据
      const response = await queryAllContact();
      // 格式化联系人数据为键值对形式
      const result = response.data.reduce<{ [key: string]: { text: string } }>((acc, curr) => {
        acc[curr.userName] = { text: curr.nickName };
        return acc;
      }, {});
      // 更新状态 allContact
      setAllContact(result);
      console.log(result); // 打印结果到控制台
    } catch (error) {
      // 捕获并打印错误信息
      console.error(error);
    }
  };

  // 使用 useEffect，在组件挂载时调用 getAllContact
  useEffect(() => {
    getAllContact();
  }, []);

  // 返回组件渲染内容
  return (
    <PageContainer>
      {/* 显示提示信息 */}
      <Alert
        message="温馨提示"
        description="从2024年4月24日开始，微信朋友圈的图片暂时无法显示。经过我们的初步分析，猜测这可能是由于某些限制导致的。不过，请放心，2024年4月24日之前发布的图片依然可以正常显示，不受影响。"
        type="warning"
        style={{ marginBottom: 10 }}
        showIcon
        closable
      />
      {/* 显示动态列表 */}
      <ProList<FeedsItem>
        // 配置数据请求
        request={async (params) => {
          try {
            // 调用 queryFeeds 获取动态数据
            return queryFeeds(params);
          } catch (error) {
            console.error(error); // 捕获错误并打印
            return []; // 返回空数据
          }
        }}
        // 搜索栏配置
        search={{}}
        // 设置边框样式
        bordered
        // 配置列表布局
        itemLayout="vertical"
        // 配置分页
        pagination={{
          pageSize: 5, // 每页显示 5 条
          showSizeChanger: false, // 不允许改变分页大小
        }}
        // 配置字段元数据
        metas={{
          // 昵称字段
          title: {
            dataIndex: 'nickName',
            search: false, // 不在搜索中显示
          },
          // 用户名字段
          userName: {
            title: '用户名',
            valueType: 'select', // 下拉选择类型
            dataIndex: 'userName',
            valueEnum: allContact, // 使用联系人信息
          },
          // 创建时间字段
          strCreateTime: {
            title: '创建时间',
            key: 'createdAtRange',
            dataIndex: 'createdAtRange',
            valueType: 'dateRange', // 日期范围选择器
            search: {
              transform: (value) => {
                // 转换时间为 UNIX 时间戳
                return {
                  startTime: dayjs(value[0]).unix(),
                  endTime: dayjs(value[1]).add(1, 'day').unix(),
                };
              },
            },
          },
          // 头像字段
          avatar: {
            dataIndex: 'headImgUrl',
            search: false,
            render: (_, record) => {
              // 显示头像
              return <Avatar src={record.headImgUrl}></Avatar>;
            },
          },
          // 描述字段
          description: {
            dataIndex: 'contentDesc',
            search: false,
          },
          // 操作字段
          actions: {
            render: () => [
              <IconText icon={StarOutlined} text="0" key="list-vertical-star-o" />, // 收藏
              <IconText icon={LikeOutlined} text="0" key="list-vertical-like-o" />, // 点赞
              <IconText icon={MessageOutlined} text="0" key="list-vertical-message" />, // 评论
            ],
          },
          // 内容字段
          content: {
            search: false,
            render: (_, record) => {
              // 自定义内容渲染
              return (
                <Flex vertical>
                  {/* 九宫格布局显示媒体 */}
                  <Flex vertical className="nine-grid">
                    <Row gutter={[16, 8]}>
                      {record.medias.map((media, index) => (
                        <Col key={index} xs={24} sm={12} md={8} lg={8} xl={8}>
                          <Image
                            width={150}
                            height={150}
                            fallback="/img/404.png" // 加载失败时显示的图片
                            src={`/api/image/downloadImg?path=${encodeURIComponent(media.url)}`} // 图片地址
                            style={{ objectFit: 'cover' }}
                          />
                        </Col>
                      ))}
                    </Row>
                  </Flex>
                  {/* 显示时间 */}
                  <Flex>
                    <Text type="secondary">{record.strCreateTime}</Text>
                  </Flex>
                  {/* 显示地理位置链接 */}
                  <Link
                    href={`http://api.map.baidu.com/geocoder?address=${encodeURIComponent(
                      record.location.poiName,
                    )}&output=html`}
                    target="_blank"
                    className="location"
                  >
                    {record.location.poiName}
                  </Link>
                </Flex>
              );
            },
          },
        }}
      />
    </PageContainer>
  );
};

// 导出 Feeds 组件
export default Feeds;
